<template>
	<view class="prec">
		<view class="query">
			<view style="margin-left: 15px;">
					订单编号
			</view>
			<input type="text" placeholder="请输入订单编号"  style="margin-right: 15px;text-align: right;"/>
		</view>
		<view class="querys" style="margin-top: 10px;border-radius: 8px 8px 0px 0px;">
			<text style="color: #000000;margin-left: 15px;">装货地</text>
			<view style="display: flex;align-content: center;justify-content: space-between;">
				<picker class="Choice" :range="shipAddress" @change="shipAddred" style="text-align: left;">{{ shipAddress[shipAddresing] }}</picker>
				<image src="../../static/img/order/icon_xiala_lan.png" mode="" style="width: 10px;height: 6px;margin-top: 8px;margin-left: 5px;margin-right: 15px;"></image>
			</view>
		</view>
		<view class="querys" >
			<text style="color: #000000;margin-left: 15px;">装货地</text>
			<view style="display: flex;align-content: center;justify-content: space-between;">
				<picker class="Choice" :range="placeOfReceipt" @change="placeOfReceipted" style="text-align: left;">{{ placeOfReceipt[placeOfReceipting] }}</picker>
				<image src="../../static/img/order/icon_xiala_lan.png" mode="" style="width: 10px;height: 6px;margin-top: 8px;margin-left: 5px;margin-right: 15px;"></image>
			</view>
		</view>
		<view class="querys" >
			<text style="color: #000000;margin-left: 15px;">装货地</text>
			<view style="display: flex;align-content: center;justify-content: space-between;">
				<timeSelector showType="date" @btnConfirm="btnConfirm" @btnCancel="btnCancel" beginDate="2010-01-01" endDate="2030-12-31" beginTime="09:30:30" endTime="18:00:00">
					<view  v-if="timer==true">{{ title }}</view>
					<view  v-if="timer==false">{{ time }}</view>
				</timeSelector>
				<image src="../../static/img/order/icon_xiala_lan.png" mode="" style="width: 10px;height: 6px;margin-top: 8px;margin-left: 5px;margin-right: 15px;"></image>
			</view>
		</view>
		<view class="querys" style="border: none;border-radius: 0px 0px 8px 8px;">
			<text style="color: #000000;margin-left: 15px;">装货地</text>
			<view style="display: flex;align-content: center;justify-content: space-between;">
				<timeSelector showType="date" @btnConfirm="btnConfired" @btnCancel="btnCanced" beginDate="2010-01-01" endDate="2030-12-31" beginTime="09:30:30" endTime="18:00:00">
					<view  v-if="timers==true">{{ titles }}</view>
					<view  v-if="timers==false">{{ times }}</view>
				</timeSelector>
				<image src="../../static/img/order/icon_xiala_lan.png" mode="" style="width: 10px;height: 6px;margin-top: 8px;margin-left: 5px;margin-right: 15px;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {ajaxs} from "../../apis.js"
	export default {
		data(){
			return{
				// 装货地
				shipAddress:["请选择装货地"],
				shipAddresing:0,
				// 卸货地
				placeOfReceipt:["请选择卸货地"],
				placeOfReceipting:0,
				// 时间选择
				title: '请选择时间',
				time: "",
				timer:true,
				titles: '请选择时间',
				times: "",
				timers:true,
			}
		},
		methods:{
			// 装货地
			shipAddred(e) {
				this.shipAddresing = e.detail.value;
			},
			// 卸货地
			placeOfReceipted(e) {
				this.placeOfReceipting = e.detail.value;
			},
			//开始时间
			btnConfirm(e) {
				this.time = e.key;
				this.timer=false
			},
			btnCancel() {
			},
			//结束
			btnConfired(e) {
				this.times = e.key;
				this.timers=false
			},
			btnCanced() {
			}
		},
		onLoad() {
			var that=this
			// 装车
			ajaxs({
				url: '/v1/address/list',
				method: 'post',
				data: { addresstype: 1,
				offset: 1,
				limit: 20,
				},
			
				success(res) {
					console.log(res)
					//     请求成功的处理
					res.data.list.forEach(function(item, index) { 
						that.shipAddress.push(item.address);
					});
				}
			})
				// 卸车
				ajaxs({
					url: '/v1/address/list',
					method: 'post',
					data: { addresstype: 2,
					  offset: 1, 
					  limit: 20
					 },
			
					success(res) {
						//     请求成功的处理
						res.data.list.forEach(function(item, index) {
							that.placeOfReceipt.push(item.address);
						});
					}
				});
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
	.prec{
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.query{
		width:355px;
		height:50px;
		background:rgba(255,255,255,1);
		border-radius:8px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.querys{
		width:355px;
		height:50px;
		background:rgba(255,255,255,1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f5f5f5;
		font-size: 16px;
	}
</style>
